<template>
	<view class="u-flex-1">
		<u-input :inputAlign="inputAlign" placeholder="请输入车牌号" v-model="carPlateNo" type="select" @click="setCarNum" />
		<uv-keyboard @confirm="confirm" @backspace="backspace" ref="keyboard" autoChange safeAreaInsetBottom mode="car" @change="change">
			<template #abc>
				<view class="">
					切换
				</view>
			</template>
		</uv-keyboard>
	</view>
</template>

<script setup>
	const props = defineProps({
		inputAlign: {
			type: String,
			default: 'left'
		}
	})
	const carPlateNo = defineModel()
	
	const keyboard = ref(null)
	function setCarNum(){
		keyboard.value.open()
		if (carPlateNo.value && carPlateNo.value.length) {
			nextTick(() => {
				keyboard.value.changeCarMode()
			})
		}
	}
	function change(e){
		if (carPlateNo.value && carPlateNo.value.length >= 8) {
			return
		}
		carPlateNo.value += e
	}
	function backspace() {
		if (carPlateNo.value.length == 0) return
		carPlateNo.value = carPlateNo.value.slice(0, -1)
		if (carPlateNo.value.length == 0) {
			keyboard.value.changeCarMode()
		}
	}
	
	const emits = defineEmits(['confirm'])
	function confirm(){
		emits('confirm')
	}
</script>

<style>

</style>